<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/searchres.css">
		<link rel="icon" href="./icon/title_vagetable.png">
		<title>搜索页面</title>
		<script src="./js/axios.min.js"></script>
		<script src="./js/axios.config.js"></script>
	</head>

	<body>
		<header>
			<img class="arrow" src="./img/shippingAddress/back.png" alt="">
			<span class="name">搜索结果</span>
		</header>
		<div class="search">
			<input placeholder="马卡龙色 多功能早餐机" type="text">
			<div class="button">
				<img src="./img/search/icon2.png" alt="">
			</div>
		</div>
		<nav>
			<ul class="navList">
				<li>综合</li>
				<li>销量</li>
				<li>新品</li>
				<li>价格<img class="down" src="./img/search/icon3.jpg" alt=""></li>
			</ul>
		</nav>
		<div class="searchRes">
			<ul class="searchResList">

			</ul>
		</div>
		<script>
			// 获取元素
			let oUl = document.querySelector('.searchResList')
			// 获取商品列表
			axios.get('/goods/list', {
					params: {
						pageSize: 10,
						pageIndex: 2
					}
				}).then(function(res) {
					// 处理成功情况
					console.log(res);
					if (res.status) {
						// 渲染数据
						res.data.forEach((item) => {
							let goods = `
						<li data-price="${item.price}">
							<a href="#">
								<div class="image">
									<img src="${item.img_md}" alt="">
								</div>
								<div class="info">
									<div class="name">${item.name}</div>
									<div class="description">${item.hotPoint}</div>
									<div class="price"><span>￥</span>${item.price}</div>
								</div>
							</a>
						</li>
					`
							// 插入DOM
							oUl.insertAdjacentHTML('beforeend', goods)
						})
					}
				})
				.catch(function(err) {
					// 处理错误情况
					console.log(err);
				})
				.then(function() {
					// 总是会执行
				})

			// 按价格排序
			let oChangeBtn = document.querySelector('.navList li:nth-child(4)')
			oChangeBtn.addEventListener('click', function() {
				// 查找所有的li
				let oLi = oUl.querySelectorAll('li')
				// 转化为真实的数组
				let Arr = Array.from(oLi)
				// 判断当前升序/降序
				let status = this.children[0].classList.contains('up') ? 1 : -1
				// 切换箭头样式
				if (status === 1) {
					this.children[0].classList.remove('up')
					this.children[0].classList.add('down')
				} else {
					this.children[0].classList.remove('down')
					this.children[0].classList.add('up')
				}
				//排序
				Arr.sort(function(elementA, elementB) {
					return (parseFloat(elementA.dataset.price) - parseFloat(elementB.dataset.price)) * status
				})
				Arr.forEach(function(item) {
					oUl.appendChild(item)
				})
			})
		</script>
	</body>

</html>
